<template>
  <van-tabs
    class="tabs"
    color="#90C0EF"
    v-model="active"
    title-active-color="#90C0EF"
  >
    <van-tab title="全部">
      <div class="all-list">
        <div class="order-card">
          <div class="card">
            <div class="card-header">
              <div class="order-num">外卖订单：2384691531549</div>
              <div class="order-state">待付款</div>
            </div>
            <div class="card-main">
              <div class="main-left">
                <div class="order-address">北京市朝阳区青年汇佳园10号...</div>
                <div class="order-goods">榛果拿铁等 共一件商品</div>
              </div>
              <div class="order-time">2019-01-08 09:05</div>
            </div>
            <div class="card-pay">
              <div class="pay-left">￥12</div>
              <div class="pay-right">
                <van-button class="pay-button" color="#FF8102" plain>去支付</van-button>
              </div>
            </div>
          </div>
        </div>
                <div class="order-card">
          <div class="card">
            <div class="card-header">
              <div class="order-num">外卖订单：2384691531549</div>
              <div class="order-state">待付款</div>
            </div>
            <div class="card-main">
              <div class="main-left">
                <div class="order-address">北京市朝阳区青年汇佳园10号...</div>
                <div class="order-goods">榛果拿铁等 共一件商品</div>
              </div>
              <div class="order-time">2019-01-08 09:05</div>
            </div>
            <div class="card-pay">
              <div class="pay-left">￥12</div>
              <div class="pay-right">
                <van-button class="pay-button" color="#FF8102" plain>去支付</van-button>
              </div>
            </div>
          </div>
        </div>
                <div class="order-card">
          <div class="card">
            <div class="card-header">
              <div class="order-num">外卖订单：2384691531549</div>
              <div class="order-state">待付款</div>
            </div>
            <div class="card-main">
              <div class="main-left">
                <div class="order-address">北京市朝阳区青年汇佳园10号...</div>
                <div class="order-goods">榛果拿铁等 共一件商品</div>
              </div>
              <div class="order-time">2019-01-08 09:05</div>
            </div>
            <div class="card-pay">
              <div class="pay-left">￥12</div>
              <div class="pay-right">
                <van-button class="pay-button" color="#FF8102" plain>去支付</van-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-tab>
    <van-tab title="未完成">未完成</van-tab>
    <van-tab title="已完成">已完成</van-tab>
  </van-tabs>
</template>
  
<script>
</script>
  
<style lang="less" scoped >
.tabs {
  border-top: 1px solid #f2f2f2;
}
.order-card {
  width: 100%;
  height: 170px;
  background-color: #f8f8f8;
  .card {
    width: 100%;
    float: left;
    height: 160px;
    background-color: #fff;
    margin-top: 10px;
    .card-header {
      width: 100%;
      height: 40px;
      border-bottom: 1px solid #f2f2f2;
      .order-num {
        float: left;
        font-size: 13px;
        color: #a6a6a6;
        margin-left: 15px;
        margin-top: 12px;
      }
      .order-state {
        float: right;
        font-size: 13px;
        color: #88afd5;
        margin-top: 12px;
        margin-right: 15px;
      }
    }
    .card-main {
      width: 100%;
      float: left;
      .main-left {
        float: left;
        margin-left: 15px;
        .order-address {
          margin-top: 11px;
          font-size: 15px;
          width: 210px;
          overflow: hidden;
          font-weight:bold;
        }
        .order-goods{
          margin-left: 1px;
          font-size: 13px;
          margin-top: 3px;
        }
      }
      .order-time{
        float: right;
        font-size: 12px;
        color: #a6a6a6;
        margin-top: 15px;
        margin-right: 20px;
      }
    }
    .card-pay {
      width: 100%;
      float: left;
      margin-top: 25px;
      .pay-left{
        float: left;
        font-size: 14px;
        font-weight: bold;
        margin-left: 15px;
        
      }
      .pay-right{
        float: right;
        margin-top: -8px;
        margin-right: 20px;
        .pay-button{
        height: 28px;
        width: 74px;
        font-size: 13px;
        
        }
      }
    }
  }
}
</style>
